<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <link rel="stylesheet" href="/css/home.css">
    </head>
    <body>

        <div class="wrapper first">
            <p class="title">采用 XMLHttpRequest 发送异步请求</p>
            <button class="get">发送GET请求</button>
            <button class="post">发送POST请求</button>
            <button class="put">发送PUT请求</button>
            <button class="delete">发送DELETE请求</button>
            <button class="head">发送HEAD请求</button>
            <div class="step">
                <ol>
                    <li>创建 XMLHttpRequest: <code>let $http = new XMLHttpRequest()</code></li>
                    <li>
                        绑定事件监听器 ( 在监听器中实现对响应的处理 )
                        <ul>
                            <li> <code> $http.addEventListener( 'readystatechange' , listener , false )</code> </li>
                            <li> <code> $http.addEventListener( 'load' , listener , false )</code> </li>
                            <li> <code> $http.addEventListener( 'error' , listener , false )</code> </li>
                            <li> <code> $http.addEventListener( 'loadend' , listener , false )</code> </li>
                        </ul>
                    </li>
                    <li>打开连接: <code>$http.open( method , url [ , async , user , password ] )</code></li>
                    <li>设置请求头: <code>$http.setRequestHeader( name , value )</code></li>
                    <li>
                        发送请求: <code>$http.send( body )</code>
                        <ul>
                            <li>GET和HEAD请求不能直接通过请求体发送数据给服务端</li>
                            <li>POST、PUT、DELETE 请求可以通过请求体发送数据给服务端</li>
                        </ul>
                    </li>
                </ol>
            </div>
        </div>
        <script src="/js/async-xhr.js"></script>

        <div class="wrapper second">
            <p class="title">采用 Fetch API 发送异步请求</p>
            <button class="get">发送GET请求</button>
            <button class="post">发送POST请求</button>
            <button class="put">发送PUT请求</button>
            <button class="delete">发送DELETE请求</button>
            <button class="head">发送HEAD请求</button>
            <div class="step">
                <ol>
                    <li>
                        准备 请求路径 url 和 requestInit 
                        <ul>
                            <li>请求路径: <code>const url = '/loong' ;</code></li>
                            <li>requestInit 是个对象，在其中可以设置 method 、headers 、body 等</li>
                        </ul>
                    </li>
                    <li>
                        发送请求:
                        <ul>
                            <li> <code>let promise = fetch( url , requestInit )</code></li>
                            <li> <code>let promise = fetch( request )</code></li>
                        </ul>
                    </li>
                    <li>接受响应 <code>promise.then( resp => resp.json() ).then( data => handle(data) )</code></li>
                </ol>
            </div>
        </div>
        <script src="/js/async-fetch.js"></script>

        <hr>

        <div class="wrapper">
            <p class="title">探索</p>
            <p class="links">
                <a href="/xhr.html">探索XMLHttpRequest对象</a>
                <a href="/fetch.html">探索 Fetch API</a>
            </p>
        </div>
        
    </body>
</html>